<template>
    <el-container>
        <el-header>
            <el-divider></el-divider>
            <div class="head-wrap">

                <div class="basic-info">
                    <div class="content">
                        基本信息
                    </div>
                </div>
                <div class="grab">
                    <!-- <el-button type="primary">立刻抢单</el-button> -->
                </div>
            </div>
        </el-header>

        <el-main>
            <el-descriptions border :column='1'>
                <el-descriptions-item label="订单ID">
                    {{ orderItems.orderId }}
                </el-descriptions-item>
                <el-descriptions-item label="下单时间">
                    {{ orderItems.orderTime }}
                </el-descriptions-item>
                <el-descriptions-item label="支付时间">
                    {{ orderItems.payTime }}
                </el-descriptions-item>
                <el-descriptions-item label="订单状态">
                    {{ orderItems.deliveryStatus }}
                </el-descriptions-item>
                <el-descriptions-item label="购买方式">
                    {{ orderItems.buyWay }}
                </el-descriptions-item>
                <el-descriptions-item label="支付渠道">
                    {{ orderItems.payWay }}
                </el-descriptions-item>
                <el-descriptions-item label="产品类型">
                    {{ orderItems.productType }}
                </el-descriptions-item>

                <el-descriptions-item label="收货地址">
                    {{ orderItems.address }}
                </el-descriptions-item>
                <el-descriptions-item label="备注信息">
                    {{ orderItems.moreInformation }}
                </el-descriptions-item>
            </el-descriptions>
        </el-main>

        <el-header>
            <el-divider></el-divider>
            <div class="head-wrap">

                <div class="basic-info">
                    <div class="content">
                        购买详情
                    </div>
                </div>
            </div>
        </el-header>

        <el-main>
            <el-table :data="tableData" style="width: 100%">
                <el-table-column prop="id" label="订单ID" width="180"></el-table-column>

                <el-table-column label="商品图片" width="180">
                    <template #default="{ row }">
                        <el-image :crossorigin="null" style="width: 50px; height: 50px" :src="row.imageSrc" fit="cover">
                        </el-image>
                    </template>
                </el-table-column>

                <el-table-column prop="name" label="商品名称"></el-table-column>
                <el-table-column prop="quantity" label="件数"></el-table-column>
                <el-table-column prop="emergency" label="紧急"></el-table-column>

                <el-table-column prop="price" label="价值"></el-table-column>
                <el-table-column prop="onShipping" label="是否运输"></el-table-column>
                <el-table-column prop="views" label="查看次数"></el-table-column>
            </el-table>
        </el-main>


    </el-container>
</template>

<script setup lang="ts">
import {  reactive, onMounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios'
const route = useRoute();
const tableData = reactive([
    {
        id: 1,
        imageSrc: 'https://cityexpress.yellowswimming.cn/img/objectImgOne.png', // 这里替换成真实的图片链接
        name: '紫罗兰',
        quantity: 10,
        emergency: route.query.urgency,
        price: '￥100',
        onShipping: '否',
        views: 0
    },
]);
onMounted(async () => {
    
    let id = route.query.orderId;
    const increOk = await axios.post(`http://localhost:8085/order/${id}/incr-view`);
    if (increOk.status === 200) {
        console.log('增加成功');
        const views = await axios.get(`http://localhost:8085/order/${id}/view-count`);
        console.log(views.data);
        tableData[0].views = views.data;
    }

    const response = await axios.get("http://localhost:8085/order/item/" + id);
    const data = response.data;
    console.log(data)
    tableData[0].id = data.itemId;
    tableData[0].imageSrc = data.img;
    tableData[0].name = data.itemName;
    tableData[0].quantity = data.quantity;
    tableData[0].price ="￥"+ (data.quantity * data.totalWeight).toString();
    tableData[0].emergency = route.query.urgency;
    if (route.query.deliveryStatus === '正在运输') {
        tableData[0].onShipping = '是';
    }
    else {
        tableData[0].onShipping = '否';
    }

})
// 假设的订单物品列表数据
const orderItems = reactive({
    orderId: route.query.orderId,
    senderId: route.query.senderId,
    expressMethod: route.query.expressMethod,
    deliveryStatus: route.query.deliveryStatus,
    orderTime: route.query.orderTime,
    trackingNumber: route.query.trackingNumber,
    wareHouse: route.query.wareHouse,
    returnStatus: route.query.returnStatus,
    payTime: route.query.payTime,
    buyWay: route.query.buyWay,
    payWay: route.query.payWay,
    productType: route.query.productType,
    address: route.query.address,
    moreInformation: route.query.moreInformation,
    urgency: route.query.urgency,
})

</script>

<style scoped lang="less">
.el-divider--horizontal {
    margin: 16px 0 0;
}

.el-header {


    .head-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: flex-start;

        .basic-info {
            width: 10%;
            height: 70%;

            display: flex;
            align-items: center;
            justify-content: flex-start;

            .content {
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 700;
            }
        }

        .grab {
            width: 10%;
            height: 70%;

            display: flex;
            justify-content: flex-start;
            align-items: center;
        }
    }

}

.box-card {
    .text.item {
        margin-bottom: 12px;
        line-height: 1.6;
    }
}
</style>